<template>
	<view class="header-banner">
		<!-- <image src="/static/avatar.png" class="avatar" /> -->
		<view class="welcome-text">
			<text class="title">运维工单系统</text>
		</view>
	</view>

	<view class="work-order-nav">
		<view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="item.onClick">
			<img :src="item.icon" alt="icon" class="nav-icon" />
			<text class="nav-text">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navItems: [{
						text: '申请工单',
						icon: '/static/apply.jpg',
						onClick: this.applyOrder
					},
					{
						text: '查看工单',
						icon: '/static/check.jpg',
						onClick: this.viewOrder
					},
					{
						text: '查看历史工单',
						icon: '/static/history.jpg',
						onClick: this.viewHistory
					},
					{
						text: '修改工单',
						icon: '/static/change.jpg',
						onClick: this.modifyOrder
					},
					{
						text: '撤销工单',
						icon: '/static/revoke.jpg',
						onClick: this.revokeOrder
					}
				]
			};
		},
		methods: {
			applyOrder() {
				// 处理申请工单的逻辑
				uni.navigateTo({
					url: "/pages/user/apply/apply"
				})
			},
			viewOrder() {
				// 处理查看工单的逻辑
				uni.navigateTo({
					url: "/pages/user/orderList/orderList"
				})
			},
			viewHistory() {
				// 处理查看历史工单的逻辑
				uni.navigateTo({
					url: "/pages/user/historyOrder/historyOrder"
				})
			},
			modifyOrder() {
				// 处理修改工单的逻辑
				uni.navigateTo({
					url: "/pages/user/resubmit/resubmit"
				})
			},
			revokeOrder() {
				// 处理撤销工单的逻辑
				uni.navigateTo({
					url: "/pages/user/revoke/revoke"
				})
			}
		}
	};
</script>


<style scoped>
	.work-order-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #f5f5f5;
		padding: 10px;
		gap: 10px;
	}


	.nav-item {
		width: 40%;
		/* 每行两个按钮，留些间距 */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px 2.5%;
		background: #fff;
		padding: 12px 0;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}


	.nav-icon {
		width: 40px;
		/* 根据需要调整图片大小 */
		height: 40px;
		margin-bottom: 5px;
	}

	.nav-text {
		font-size: 14px;
	}

	.header-banner {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
		background: #1890ff;
		color: white;
		border-radius: 12px;
	}

	.avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		margin-right: 12px;
	}

	.welcome-text .title {
		font-size: 20px;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		/* 垂直排列标题和副标题 */
		align-items: center;
		/* 垂直居中 */
		text-align: center;
	}

	.welcome-text .subtitle {
		font-size: 14px;
		opacity: 0.9;
	}
</style>